<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推荐职位卡片样式演示 - JH智能匹配系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles/jh_dashboard.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }
        
        .demo-container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        
        .demo-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .demo-header h1 {
            color: #1a202c;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .demo-header p {
            color: #718096;
            font-size: 1.125rem;
            margin: 0;
        }
        
        .demo-section {
            margin-bottom: 40px;
        }
        
        .demo-section h2 {
            color: #2d3748;
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 20px;
            padding-left: 16px;
            border-left: 4px solid #667eea;
        }
        
        .stats-bar {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin: 30px 0;
            padding: 20px;
            background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
            border-radius: 12px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: #667eea;
            display: block;
        }
        
        .stat-label {
            font-size: 0.875rem;
            color: #718096;
            margin-top: 4px;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <div class="demo-header">
            <h1><i class="fas fa-sparkles"></i> 全新推荐职位卡片设计</h1>
            <p>现代化、响应式、交互友好的职位推荐界面</p>
        </div>

        <div class="stats-bar">
            <div class="stat-item">
                <span class="stat-number">6</span>
                <div class="stat-label">示例职位</div>
            </div>
            <div class="stat-item">
                <span class="stat-number">100%</span>
                <div class="stat-label">响应式设计</div>
            </div>
            <div class="stat-item">
                <span class="stat-number">12+</span>
                <div class="stat-label">交互动效</div>
            </div>
            <div class="stat-item">
                <span class="stat-number">3</span>
                <div class="stat-label">匹配等级</div>
            </div>
        </div>

        <div class="demo-section">
            <h2><i class="fas fa-star"></i> 推荐职位展示</h2>
            <div class="job-cards-grid" id="demoJobCards">
                <!-- 职位卡片将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <script>
        // 模拟职位数据
        const demoJobs = [
            {
                id: 'job-1',
                title: '高级前端开发工程师',
                company: '阿里巴巴集团',
                logo: '',
                location: '杭州·西湖区',
                salary_range: '25K-40K',
                type: '全职',
                posted_at: '2天前',
                match_score: 95,
                tags: ['React', 'Vue.js', 'TypeScript', 'Node.js', '微前端'],
                match_reasons: [
                    '技能匹配度高达95%，完美符合岗位要求',
                    '工作经验与岗位要求高度吻合',
                    '薪资范围符合期望值'
                ]
            },
            {
                id: 'job-2',
                title: 'React技术专家',
                company: '字节跳动',
                logo: '',
                location: '北京·朝阳区',
                salary_range: '30K-50K',
                type: '全职',
                posted_at: '1天前',
                match_score: 88,
                tags: ['React', 'Redux', 'GraphQL', 'Webpack', '性能优化'],
                match_reasons: [
                    'React专业技能深度匹配',
                    '大厂工作经验优势明显'
                ]
            },
            {
                id: 'job-3',
                title: 'Web前端开发工程师',
                company: '腾讯科技',
                logo: '',
                location: '深圳·南山区',
                salary_range: '20K-35K',
                type: '全职',
                posted_at: '3天前',
                match_score: 82,
                tags: ['Vue.js', 'JavaScript', 'CSS3', '响应式设计'],
                match_reasons: [
                    '前端基础技能扎实',
                    '项目经验丰富'
                ]
            },
            {
                id: 'job-4',
                title: '全栈开发工程师',
                company: '美团',
                logo: '',
                location: '北京·海淀区',
                salary_range: '22K-38K',
                type: '全职',
                posted_at: '5天前',
                match_score: 75,
                tags: ['Vue.js', 'Python', 'MySQL', 'Docker'],
                match_reasons: [
                    '全栈开发能力符合要求'
                ]
            },
            {
                id: 'job-5',
                title: 'JavaScript开发工程师',
                company: '小米科技',
                logo: '',
                location: '北京·昌平区',
                salary_range: '18K-30K',
                type: '全职',
                posted_at: '1周前',
                match_score: 68,
                tags: ['JavaScript', 'HTML5', 'CSS3', 'jQuery'],
                match_reasons: [
                    'JavaScript基础技能良好'
                ]
            },
            {
                id: 'job-6',
                title: '前端实习生',
                company: '京东集团',
                logo: '',
                location: '北京·大兴区',
                salary_range: '实习薪资',
                type: '实习',
                posted_at: '2周前',
                match_score: 55,
                tags: ['HTML', 'CSS', 'JavaScript', '学习能力强'],
                match_reasons: [
                    '适合新人成长的优质平台'
                ]
            }
        ];

        // 生成职位卡片的函数
        function generateJobCards() {
            const container = document.getElementById('demoJobCards');
            const sanitize = (v) => (v == null ? '' : String(v));
            
            const formatSalary = (salary) => {
                if (!salary) return '薪资面议';
                return salary.includes('面议') ? salary : `${salary}`;
            };
            
            const getMatchLevel = (score) => {
                if (score >= 80) return { level: 'high', color: '#48bb78', text: '高度匹配' };
                if (score >= 60) return { level: 'medium', color: '#ed8936', text: '中度匹配' };
                return { level: 'low', color: '#e53e3e', text: '基础匹配' };
            };

            let html = '';
            
            demoJobs.forEach((position, index) => {
                const tags = position.tags || [];
                const jobId = position.id;
                const reasons = position.match_reasons || [];
                const matchScore = Math.max(0, Math.min(100, Number(position.match_score)||0));
                const matchInfo = getMatchLevel(matchScore);
                
                // 生成公司Logo的占位符
                const logoPlaceholder = position.company ? position.company.charAt(0).toUpperCase() : 'C';
                
                html += `
                    <div class="job-card" data-id="${jobId}" style="animation-delay: ${index * 0.1}s">
                        <div class="job-card-content">
                            <div class="job-card-header">
                                <div class="job-card-title">
                                    <h4 title="${sanitize(position.title)}">${sanitize(position.title)}</h4>
                                    <span class="job-badge">${sanitize(position.type || '全职')}</span>
                                </div>
                                <div class="job-match" title="${matchInfo.text}">
                                    <span>${matchScore}</span>
                                </div>
                            </div>
                            
                            <div class="job-card-company">
                                <div class="job-logo">${logoPlaceholder}</div>
                                <span title="${sanitize(position.company)}">${sanitize(position.company)}</span>
                            </div>
                            
                            <div class="job-card-meta">
                                <span title="工作地点"><i class="fas fa-map-marker-alt"></i>${sanitize(position.location)}</span>
                                <span title="薪资范围"><i class="fas fa-yen-sign"></i>${formatSalary(sanitize(position.salary_range))}</span>
                                <span title="发布时间"><i class="fas fa-clock"></i>${sanitize(position.posted_at || '最近发布')}</span>
                            </div>
                            
                            ${reasons.length ? `
                            <div class="job-card-reasons">
                                ${reasons.map(reason => `<div class="reason">${sanitize(reason)}</div>`).join('')}
                            </div>` : ''}
                            
                            ${tags.length ? `
                            <div class="job-card-tags">
                                ${tags.slice(0,6).map(tag => `<span class="job-tag" title="${sanitize(tag)}">${sanitize(tag)}</span>`).join('')}
                                ${tags.length > 6 ? `<span class="job-tag" style="background:#f7fafc; color:#718096;">+${tags.length - 6}</span>` : ''}
                            </div>` : ''}
                            
                            <div class="job-card-actions">
                                <button class="btn btn-outline" data-action="compare" data-id="${jobId}" title="添加到对比">
                                    <i class="fas fa-balance-scale"></i> 对比
                                </button>
                                <button class="btn btn-secondary" data-action="favorite" data-id="${jobId}" title="收藏职位">
                                    <i class="fas fa-heart"></i> 收藏
                                </button>
                                <button class="btn btn-primary" data-action="detail" data-id="${jobId}" title="查看详细信息">
                                    <i class="fas fa-eye"></i> 详情
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
            
            // 添加交互效果
            enhanceJobCardInteractions();
        }

        // 增强卡片交互效果
        function enhanceJobCardInteractions() {
            const jobCards = document.querySelectorAll('.job-card');
            
            jobCards.forEach(card => {
                // 卡片点击高亮效果
                card.addEventListener('click', function(e) {
                    if (!e.target.closest('.job-card-actions')) {
                        jobCards.forEach(c => c.classList.remove('selected'));
                        this.classList.add('selected');
                    }
                });
                
                // 标签hover效果
                const tags = card.querySelectorAll('.job-tag');
                tags.forEach(tag => {
                    tag.addEventListener('mouseenter', function() {
                        this.style.transform = 'scale(1.05) translateY(-2px)';
                        this.style.zIndex = '10';
                    });
                    
                    tag.addEventListener('mouseleave', function() {
                        this.style.transform = '';
                        this.style.zIndex = '';
                    });
                });
                
                // 按钮交互效果
                const buttons = card.querySelectorAll('.job-card-actions button');
                buttons.forEach(button => {
                    button.addEventListener('click', function(e) {
                        e.preventDefault();
                        
                        const originalText = this.innerHTML;
                        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
                        this.disabled = true;
                        
                        setTimeout(() => {
                            this.innerHTML = originalText;
                            this.disabled = false;
                            
                            const action = this.dataset.action;
                            if (action === 'favorite') {
                                this.innerHTML = '<i class="fas fa-heart" style="color:#e53e3e;"></i> 已收藏';
                                this.classList.add('active');
                            } else if (action === 'compare') {
                                this.innerHTML = '<i class="fas fa-check"></i> 已添加';
                                this.classList.add('active');
                            } else if (action === 'detail') {
                                alert('查看职位详情功能');
                            }
                        }, 1500);
                    });
                });
            });
        }

        // 页面加载完成后生成卡片
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(generateJobCards, 300);
        });
    </script>
</body>
</html> 